<template>
  <el-card class="box-card" id="step1">
    <el-steps :active="active" finish-status="success">
        <el-step title="业主信息" description="业主信息"></el-step>
        <el-step title="房产绑定" description="绑定房产信息"></el-step>
        <el-step title="绑定完成" description="房产绑定成功"></el-step>
    </el-steps>

    <div  v-if="active == 1">
        <el-alert 
            title="业主手机号是业主唯一的身份证标识"
            description="未导入的业主先导入系统"
            show-icon
            style="background-color: #eef7fe;"
            :closable="false">
        </el-alert>
        <el-row class="row1">
            <el-input placeholder="请输入业主手机号" prefix-icon="el-icon-user-solid" v-model="phone">
            </el-input>
        </el-row>
        <el-row class="row1">
            <el-button type="primary" style="display: block; margin: 30px auto;" @click="nextStep">下一步</el-button>
        </el-row>
    </div>
    
    <div v-if="active == 2">

        <el-descriptions class="margin-top" title="业主" :column="3" :size="size" border>
            <template slot="extra">
            </template>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                用户名
            </template>
            {{ ownerinfo.name }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
            </template>
            {{ ownerinfo.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                身份证号码
            </template>
            {{ ownerinfo.idCard }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                头像：
            </template>
            <el-avatar shape="square" style="width: 100px;height: 100px;" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                已绑定房产
            </template>
            {{ propertyDetails }}
            </el-descriptions-item>
        </el-descriptions>

        <el-card class="box-card"> 
            <div slot="header" class="clearfix">
                <h3>未入户房产</h3>
            </div>
            <el-row>
                <b>门牌/编号：</b>
                <el-input palceholder="请输入楼号/弄号检索" v-model="number" style="width
                :250px;"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="nextStep">检索</el-button>
            </el-row>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号">
            </el-table-column>
            <el-table-column
                prop="detail"
                label="详细">
            </el-table-column>
            <el-table-column
                prop="type"
                label="房产类型">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.tagColor">{{ scope.row.propertyType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="area"
                label="建筑面积(㎡)">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="primary" @click="binding(scope.row.id)">绑定</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>

    <div v-if="active == 3">
        <el-result icon="success">
        <template slot="extra">
            <el-empty description="绑定完成"></el-empty>
            <el-button type="primary" size="medium" @click="returnStep1">返回</el-button>
        </template>
        </el-result>
       
    </div>
  </el-card>
</template>

<script>
export default {
    name:'propertyBinding',
    data(){
        return{
            phone:'',
            active:1,
            ownerinfo:[],
            tableData:{},
            propertyDetails:[],
            currentPage:1,
            pageSize:5,
            total:0,
            number:''
        }
    },
    methods:{
        initAuthority(){
        this.$request.get("/role/authority",{
          params:{
            id: JSON.parse(localStorage.getItem("admin")).id,
            index: 9
          }
        })
        .then(res =>{
          this.Authority = res.data
          if(res.data == '1'){
            return;
            // this.initTable()
          }else{
            this.$message.error("你没有权限访问此功能")
            this.$router.push("/")
          }
        })
        .catch(err =>{
          console.log(err)
        })

      },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.nextStep()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.nextStep()
        },
        nextStep(){
            if(this.phone.length != 0){
                this.$request.get("/property/getOwnerAndProperty",{
                    params:{
                        phone:this.phone,
                        page:this.currentPage,
                        size:this.pageSize,
                        number:this.number
                    }
                })
                .then(res=>{
                    if(res.status == 200){
                        this.ownerinfo = res.data.ownerInfo
                        this.tableData = res.data.propertyList
                        this.total = res.data.total
                        this.propertyDetails = res.data.propertyDetails
                        this.active = 2
                    }else if(res.status == 400){
                        this.$message({
                            type:'error',
                            message:'业主未创建',
                            showClose:true
                        })
                    }
                })
                .catch(err=>{
                    console.log(err)
                })

            }
        },
        binding(id){
            this.$confirm("是否将编号为"+id+"房产与实名为"+this.ownerinfo.name+"的业主绑定", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '绑定成功!'
                })
                this.active = 3
                const ownerId = this.ownerinfo.id
                this.$request.put("/property/binding",{
                    propertyId:id,
                    ownerid:ownerId
                }).then(res=>{
                    console.log(res)
                }).catch(err=>{
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消'
                })         
            })
        },
        returnStep1(){
            this.pet.phone = ''
            this.active = 1
        }
    }
}
</script>

<style>
.el-alert{
    width: 50%;
    height: 120px;
    margin: 100px auto 15px;
    border-radius: 2%;
    color: aqua;
    font-size: larger;
}
.row1{
    width: 50%;
    margin: 0 auto;
}
/* #step1{
    height: 80vh;
} */
</style>